{% extends "base.html" %}

{% block title %}首页 - SteHub{% endblock %}

{% block content %}
<div class="row">
    <!-- 左侧内容 -->
    <div class="col-lg-8">
        <!-- 欢迎横幅 -->
        <div class="jumbotron bg-light p-5 rounded mb-4">
            <h1 class="display-4">欢迎来到 SteHub！</h1>
            <p class="lead">专为学生打造的免费在线交流平台，集论坛、实时聊天、资源分享于一体。</p>
            <hr class="my-4">
            <p>与同学交流学习经验，分享学习资源，参与有趣的讨论。</p>
            {% if not current_user.is_authenticated %}
            <a class="btn btn-primary btn-lg" href="{{ url_for('auth.register') }}" role="button">立即注册</a>
            <a class="btn btn-outline-secondary btn-lg" href="{{ url_for('auth.login') }}" role="button">登录</a>
            {% endif %}
        </div>

        <!-- 最新帖子 -->
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="fas fa-newspaper me-2"></i>最新帖子</h5>
                <a href="{{ url_for('forum.posts') }}" class="btn btn-sm btn-outline-primary">查看全部</a>
            </div>
            <div class="card-body">
                {% if recent_posts %}
                    {% for post in recent_posts %}
                    <div class="post-item mb-3 pb-3 border-bottom">
                        <div class="d-flex justify-content-between align-items-start">
                            <div class="flex-grow-1">
                                <h6 class="mb-1">
                                    <a href="{{ url_for('forum.view_post', post_id=post.id) }}" class="text-decoration-none">
                                        {{ post.title }}
                                    </a>
                                    {% if post.is_sticky %}
                                    <span class="badge bg-warning ms-1">置顶</span>
                                    {% endif %}
                                    {% if post.is_featured %}
                                    <span class="badge bg-danger ms-1">精华</span>
                                    {% endif %}
                                </h6>
                                <p class="text-muted small mb-1">
                                    <a href="#" class="text-muted">{{ post.author.username }}</a>
                                    · {{ post.created_at|relative_time }}
                                    · <span class="category-badge" style="background-color: {{ post.category.color }};">
                                        {{ post.category.name }}
                                    </span>
                                </p>
                                <p class="small text-muted mb-0">
                                    <i class="fas fa-eye me-1"></i>{{ post.view_count }}
                                    <i class="fas fa-heart ms-2 me-1"></i>{{ post.like_count }}
                                    <i class="fas fa-comment ms-2 me-1"></i>{{ post.comment_count }}
                                </p>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                {% else %}
                    <p class="text-muted text-center py-3">暂无帖子，快来发布第一个帖子吧！</p>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- 右侧边栏 -->
    <div class="col-lg-4">
        <!-- 平台统计 -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-chart-bar me-2"></i>平台统计</h5>
            </div>
            <div class="card-body">
                <div class="row text-center">
                    <div class="col-4">
                        <div class="stat-item">
                            <h4 class="text-primary">{{ user_count }}</h4>
                            <small class="text-muted">用户</small>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="stat-item">
                            <h4 class="text-success">{{ post_count }}</h4>
                            <small class="text-muted">帖子</small>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="stat-item">
                            <h4 class="text-info">{{ online_users|length }}</h4>
                            <small class="text-muted">在线</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 热门分类 -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-tags me-2"></i>热门分类</h5>
            </div>
            <div class="card-body">
                {% if popular_categories %}
                    {% for category in popular_categories %}
                    <a href="{{ url_for('forum.view_category', category_id=category.id) }}" 
                       class="badge category-badge mb-2 me-2 text-decoration-none" 
                       style="background-color: {{ category.color }};">
                        {{ category.name }}
                        <span class="badge bg-light text-dark ms-1">{{ category.post_count }}</span>
                    </a>
                    {% endfor %}
                {% else %}
                    <p class="text-muted small">暂无分类</p>
                {% endif %}
            </div>
        </div>

        <!-- 在线用户 -->
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-users me-2"></i>在线用户</h5>
            </div>
            <div class="card-body">
                {% if online_users %}
                    <div class="d-flex flex-wrap gap-2">
                        {% for user in online_users %}
                        <span class="badge bg-success">
                            <i class="fas fa-circle me-1"></i>{{ user.username }}
                        </span>
                        {% endfor %}
                    </div>
                {% else %}
                    <p class="text-muted small">暂无在线用户</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// 首页特定的JavaScript代码
document.addEventListener('DOMContentLoaded', function() {
    // 可以添加首页特定的交互功能
});
</script>
{% endblock %}